<template>
<div class="show-search">
   <img width="50px" style=" position: absolute;top: 70px; right: 70px; cursor: pointer;"  @click="$emit('closeSear', false)" src="../assets/img/close (3).png" alt="">
  <div class="search-wrap">
  <el-input placeholder="搜索新闻" v-model="KEY" class="input-with-select" @keyup.enter.native="$emit('search-text', KEY)">
    <el-button slot="append" icon="el-icon-search" style="color: #fff" v-on:click="$emit('search-text', KEY)" ></el-button>
  </el-input>
</div>
<div class="result-search" @click="$emit('closeSear', false)">
   <TabItem v-show="newsList.count" :item-data="newsList.results" item-type="journalism"></TabItem>
   <div v-show="!newsList.count" style="    text-align: center;
    margin-bottom: 14px;
    font-size: 18px;">
      没有结果
   </div>
</div>
</div>
</template>

<script>
import TabItem from "./TabItem";
export default {
  name: 'Search',
  props: ['msg'],
  watch: {
    KEY(cur) {
      
       this.$request({url: `/journalism/?size=4&search=${cur}`}).then(
        result => {
          const {data} = result;
          this.newsList =data
        }
      )

      if (cur== '') {
        this.$emit('keyEmpty')
      }
    }
  },
  data() {
    return {
      KEY: '' || this.msg,
      newsList: ''
    }
  },
  created() {
    this.$request({url: `/journalism/?size=4`}).then(
      result => {
        const {data} = result;
        this.newsList =data
      }
    )
  },
  components: {
    TabItem
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.el-header {
  background: rgba(0, 0, 0, 1);
  opacity: 0.6;
}

.search-wrap {
  width: 509px;
  display inline-block
  margin 0 auto
  margin-top 50px

  .el-button {
    background: #d3202a
    border-color: #d3202a
    border: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}



.el-input-group__append, .el-input-group__prepend{
  background: #d3202a
}

.el-input-group__append,.el-input__inner, .el-input-group__prepend{
  border 1px solid #d3202a
}

.el-input.is-active .el-input__inner, .el-input__inner:focus{
  border-color: #d3202a
}

.el-icon-search:before {
  color: #fff
  font-weight: 800;
}

 .show-search
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index 999
    background-color rgba(158, 158, 158, 0.8);
    .result-search 
      text-align left
      background-color #fff
      width 764px
      margin 0 auto
      box-sizing border-box
      padding 20px
      margin-top 40px
      padding-bottom 2px
</style>
